<template>
  <div class="notifications-page">
    <!-- <div class="coming-soon">
      <el-icon size="64" color="#8590a6"><Bell /></el-icon>
      <h2>消息通知页面开发中...</h2>
      <p>敬请期待</p>
    </div> -->
    <div
      class="q-text qu-dynamicFontSize--regular qu-display--flex qu-px--large qu-flexDirection--row"
      width="1072"
      style="width: 1072px; margin-left: auto; margin-right: auto"
    >
      <!-- 左侧 -->
      <div class="q-box" width="142" style="width: 142px">
        <div
          class="q-box qu-overflowY--auto qu-overflowX--hidden qu-pb--medium qu-mx--n_medium false"
          height="calc(100vh - 80px)"
          style="
            height: calc(-80px + 100vh);
            position: sticky;
            top: 80px;
            --page-contents-layout-scroll-bar-color: rgba(0, 0, 0, 0.1);
          "
        >
          <div
            class="q-box qu-borderBottom qu-pt--small qu-pb--small"
            style="padding-left: 16px; padding-right: 16px"
          >
            <div class="q-flex qu-alignItems--center">
              <div class="q-box" style="flex: 1 1 0%">
                <div
                  class="q-text qu-dynamicFontSize--regular qu-medium qu-color--gray_dark qu-passColorToLinks"
                >
                  Filters
                </div>
              </div>
            </div>
          </div>
          <div class="q-box" role="list">
            <div
              v-for="(filter, index) in filters"
              :key="index"
              class="q-click-wrapper c1nud10e qu-borderRadius--small qu-mt--tiny qu-overflow--hidden qu-display--block qu-tapHighlight--none qu-cursor--pointer"
              style="
                font: inherit;
                padding: 0px;
                width: 100%;
                color: inherit;
                text-align: inherit;
              "
              @click="setActiveFilter(filter.value)"
            >
              <div
                class="q-box qu-pl--medium qu-pr--medium qu-hover--cursor--pointer qu-tapHighlight--none qu-display--flex qu-alignItems--center"
                :class="{
                  'qu-hover--bg--red_transparent': isActiveFilter(filter.value),
                  'qu-bg--red_transparent': isActiveFilter(filter.value),
                }"
                style="position: relative"
              >
                <div
                  class="q-flex qu-alignItems--center qu-py--tiny qu-flex--auto qu-overflow--hidden"
                >
                  <div class="q-box qu-flex--auto qu-overflow--hidden">
                    <div
                      class="q-text"
                      :class="{
                        'qu-color--red': isActiveFilter(filter.name),
                        'qu-medium': isActiveFilter(filter.name),
                        'qu-color--gray': !isActiveFilter(filter.name),
                      }"
                    >
                      <div class="q-text qu-dynamicFontSize--small">
                        {{ filter.name }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="q-box"
        width="570"
        id="mainContent"
        style="width: 570px; margin-left: 30px"
      >
        <!-- 头部 -->
        <div class="q-box qu-borderBottom qu-pt--small qu-pb--small">
          <div class="q-flex qu-alignItems--center">
            <div class="q-box" style="flex: 1 1 0%">
              <div
                class="q-text qu-dynamicFontSize--regular qu-medium qu-color--gray_dark qu-passColorToLinks"
              >
                {{ active }}
              </div>
            </div>
            <div class="q-box qu-ml--small">
              <div class="q-text qu-dynamicFontSize--small qu-color--gray">
                <span
                  ><span class="q-box qu-display--none"></span
                  ><span class="c1h7helg" style="--separator: ' · '"
                    ><a
                      class="q-box qu-color--gray qu-cursor--pointer qu-hover--textDecoration--underline b2c1r2a puppeteer_test_link"
                      href=""
                      target="_top"
                      style="border-radius: inherit"
                      >Settings</a
                    ></span
                  ></span
                >
              </div>
            </div>
          </div>
        </div>
        <!-- 无数据 -->
        <div
          v-if="dataList.length == 0"
          class="q-flex qu-px--large qu-py--medium qu-bg--white qu-alignItems--center qu-justifyContent--center qu-textAlign--center"
          height="auto"
          style="height: auto"
        >
          <div class="q-box qu-py--large">
            <img
              class="q-image qu-mb--tiny"
              src="@/assets/no_notification_lightmode.png"
              width="100px"
              style="max-width: 100%; width: 100px"
            />
            <div
              class="q-text qu-dynamicFontSize--large qu-bold qu-color--gray qu-mb--tiny"
            >
              No New Notifications
            </div>
            <div
              class="q-text qu-dynamicFontSize--regular qu-color--gray qu-mb--large"
            >
              Notifications you received in the last 30 days will show up here.
            </div>
          </div>
        </div>
        <!-- 列表 -->
        <div class="q-box qu-display--block">
          <div class="q-relative" v-for="item in dataList" :key="item.id">
            <div
              class="q-box qu-cursor--pointer qu-p--medium qu-borderBottom qu-bg--blue_ultralight qu-hover--bg--blue_ultralight"
              @click="goDetail(item)"
            >
              <div
                class="q-box"
                style="position: relative; pointer-events: none"
              >
                <div class="q-flex" id="notif-item-0" data-notif-read="false">
                  <div class="q-box">
                    <div
                      class="q-box qu-display--inline-flex"
                      style="z-index: 0"
                    >
                      <div
                        class="q-inlineFlex qu-overflow--hidden qu-borderRadius--squircle"
                        style="position: relative"
                      >
                        <img
                          class="q-image qu-display--block qu-size--32 qu-minWidth--32 qu-bg--white__ignore_dark_mode"
                          :src="item.avatar"
                          size="32"
                          alt="Icon for Quora Product Updates"
                          style="max-width: 100%; position: relative"
                        />
                      </div>
                    </div>
                  </div>
                  <div
                    class="q-box qu-flex--auto qu-mx--medium"
                    style="min-width: 0px; overflow-wrap: break-word"
                  >
                    <div
                      class="q-text qu-dynamicFontSize--small qu-color--gray qu-mb--tiny"
                    >
                      <span
                        ><span class="q-box qu-display--none"></span
                        ><span class="c1h7helg" style="--separator: ' · '"
                          >{{ item.title }}</span
                        ><span class="q-box qu-display--none"> · </span
                        ><span
                          class="c1h7helg c8970ew"
                          style="--separator: ' · '"
                          >{{ item.time }} ago</span
                        ></span
                      >
                    </div>
                    <div
                      class="q-text qu-display--inline qu-truncateLines--2 qu-bold"
                      style="margin-bottom: 0px"
                    >
                      {{ item.description }}
                    </div>
                  </div>
                  <div class="q-box">
                    <span
                      class="q-box"
                      style="margin-right: auto; pointer-events: auto"
                      ><div
                        class="q-inlineFlex qu-alignItems--flex-end i1k9lguw"
                      >
                        <div class="q-box">
                          <div class="q-relative puppeteer_popper_reference">
                            <button
                              class="q-click-wrapper puppeteer_test_overflow_menu b10gcu9l bobc9nh b1cg7ppz c1nud10e qu-active--bg--darken qu-borderRadius--pill qu-alignItems--center qu-justifyContent--center qu-whiteSpace--nowrap qu-userSelect--none qu-display--inline-flex qu-tapHighlight--white qu-textAlign--center qu-cursor--pointer qu-hover--bg--darken"
                              height="38"
                              role="button"
                              aria-haspopup="menu"
                              aria-expanded="false"
                              tabindex="0"
                              style="
                                font: inherit;
                                padding: 0px 6px;
                                transition-property: box-shadow,
                                  background-color;
                                transition-duration: 60ms;
                                transition-timing-function: ease-out;
                                height: 38px;
                                min-width: 38px;
                                position: relative;
                                border-width: 0px;
                                outline: none;
                                color: inherit;
                                background-color: transparent;
                              "
                            >
                              <div
                                class="q-flex qu-alignItems--center qu-justifyContent--center"
                                style="
                                  max-width: 100%;
                                  transition-property: opacity;
                                  transition-duration: 60ms;
                                  transition-timing-function: ease-in-out;
                                "
                              >
                                <div
                                  class="q-box qu-display--inline-flex"
                                  style="
                                    transition-property: transform;
                                    transition-timing-function: cubic-bezier(
                                      0.23,
                                      0.19,
                                      0.1,
                                      1.34
                                    );
                                    transition-delay: 0ms;
                                    transition-duration: 0ms;
                                  "
                                >
                                  <span
                                    class="q-inlineBlock qu-width--24 qu-height--24"
                                    width="24"
                                    height="24"
                                    aria-label="More"
                                    style="
                                      display: inline-block;
                                      flex-shrink: 0;
                                      line-height: 24px;
                                    "
                                    ><span
                                      class="c8lvhxo c1qi64n3 c13dhsxm"
                                      style="
                                        width: 24px;
                                        height: 24px;
                                        --strokeColor: var(
                                          --q-colors-text-gray
                                        );
                                        --fillColor: var(--q-colors-text-gray);
                                        --strokeWidth: 1.5;
                                      "
                                      ><svg
                                        width="24"
                                        height="24"
                                        viewBox="0 0 24 24"
                                        xmlns="http://www.w3.org/2000/svg"
                                      >
                                        <path
                                          d="M5 14a2 2 0 1 1 0-4 2 2 0 0 1 0 4Zm7 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4Zm7 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4Z"
                                          class="icon_svg-stroke"
                                          stroke-width="1.5"
                                          stroke="#666"
                                          fill="none"
                                        ></path></svg></span
                                  ></span>
                                </div>
                              </div>
                            </button>
                          </div>
                        </div></div
                    ></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="q-box qu-display--none">
          <div></div>
        </div>
      </div>
      <div
        class="q-box"
        width="300"
        style="width: 300px; margin-left: 30px; flex-shrink: 0"
      ></div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import updatesIcon from "@/assets/updates.jpeg";

const filters = ref([
  { name: "All Notifications", value: "Notifications", num: 1 },
  { name: "Stories", value: "Stories", num: 0 },
  { name: "Questions", value: "Questions", num: 0 },
  { name: "Spaces", value: "Spaces", num: 0 },
  { name: "People updates", value: "People updates", num: 0 },
  { name: "Comments and mentions", value: "Comments and mentions", num: 0 },
  { name: "Upvotes", value: "Upvotes", num: 1 },
  { name: "Your content", value: "Your content", num: 0 },
  { name: "Your profile", value: "Your profile", num: 0 },
  { name: "Announcements", value: "Announcements", num: 0 },
  { name: "Earnings", value: "Earnings", num: 0 },
  { name: "Subscriptions", value: "Subscriptions", num: 0 },
]);

const active = ref("Notifications");

const setActiveFilter = (value) => {
  active.value = value;
  getList();
};

const isActiveFilter = (value) => {
  return active.value === value;
};
const dataList = ref([]);
function getList() {
  if (active.value === "Notifications" || active.value === "Upvotes") {
    dataList.value = [
      {
        id: 1,
        title: "Quora Product Updates",
        description: "Quora invited you to follow Quora Product Updates",
        time: "2hours",
        avatar: updatesIcon,
      }
    ]
  } else {
    dataList.value = []
  }
}

function goDetail() {}

onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped>
// .notifications-page {
//   padding: 24px;
//   text-align: center;
// }

// .coming-soon {
//   background: $background-color;
//   border-radius: $border-radius-large;
//   padding: 60px 40px;
//   box-shadow: $shadow-light;

//   h2 {
//     margin: 16px 0 8px;
//     color: $text-color;
//   }

//   p {
//     color: $text-secondary;
//   }
// }
</style>
